<template>
    <div>
        <div class="flex">
            <el-radio-group v-model="type" size="large" @change="pieChange">
                <el-radio-button label="sale_">销量</el-radio-button>
                <el-radio-button label="_money">销售额</el-radio-button>
            </el-radio-group>
            <el-select v-model="day" class="m-2" placeholder="Select" size="large" @change="pieChange">
                <el-option label="今天" value="today" />
                <el-option label="昨天" value="yesterday" />
                <el-option label="前3天" value="three_days" />
                <el-option label="前7天" value="seven_days" />
                <el-option label="前14天" value="fourteen_days" />
                <el-option label="前1个月" value="thirty_days" />
                <el-option label="前2个月" value="sixty_days" />
            </el-select>
        </div>
        <div class="pie" id="pie" style="height: 400px"></div>
        <div class="map" id="map" style="height: 600px"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { statApi } from "./api";
import china from "@/json/china.json";

type EChartsOption = echarts.EChartsOption;
type dayMenu =
    | "yesterday"
    | "today"
    | "three_days"
    | "thirty_days"
    | "sixty_days"
    | "seven_days"
    | "fourteen_days";

//通过观察数据发现  sale_时间  表示销量   时间_money 表示销售额
const type = ref<"sale_" | "_money">("sale_");
const day = ref<dayMenu>("yesterday");
let pieData: SalePie[] = [];
let mapData: SaleMap[] = [];
let option: EChartsOption;
let myChart: echarts.ECharts;

const pieChange = () => {
    //把type和day拼接
    const key =
        type.value === "sale_" ? type.value + day.value : day.value + type.value;
    const data: any[] = pieData.map((item) => ({
        name: item.name,
        value: item[key],
    }));
    //更新视图
    (option.series as echarts.SeriesOption[])[0].data = data;
    myChart.setOption(option);
};

const drawMap = () => {
    //地图配置
    var mapDom = document.getElementById("map")!;
    var mapChart = echarts.init(mapDom);

    let data = mapData.map((item) => ({
        name: item.areaName,
        value: item.saleNum,
    }));
    //地图的json数据要注册
    echarts.registerMap("China", china as any);

    let mapOption: EChartsOption = {
        title: {
            text: "全国销量分布图",
            left: "center",
        },
        //鼠标放上去的显示效果
        tooltip: {
            trigger: "item",
            formatter: "{b}<br/>销量：{c}",
            backgroundColor: "rgba(0,0,0,.6)",
            textStyle: {
                color: "#fff",
            },
        },
        visualMap: {
            min: 0,
            max: 1000000,
            text: ["High", "Low"],
            realtime: false,
            calculable: true,
            inRange: {
                color: ["#FDC7C1", "#FE4C0F", "#A92C28"],
            },
        },
        series: [
            {
                name: "中华人民共和国地图",
                type: "map",
                map: "China",
                data,
                zoom: 1.2,
                emphasis: {
                    //高亮状态文字不显示
                    label: {
                        show: false,
                    },
                },
            },
        ],
        //返回的数据要和json里的name名字一直,不然无法识别
        nameMap: {
            北京市: "北京",
            天津市: "天津",
            河北省: "河北",
            山西省: "山西",
            内蒙古自治区: "内蒙古",
            辽宁省: "辽宁",
            吉林省: "吉林",
            黑龙江省: "黑龙江",
            上海市: "上海",
            江苏省: "江苏",
            浙江省: "浙江",
            安徽省: "安徽",
            福建省: "福建",
            江西省: "江西",
            山东省: "山东",
            河南省: "河南",
            湖北省: "湖北",
            湖南省: "湖南",
            广东省: "广东",
            广西壮族自治区: "广西",
            海南省: "海南",
            重庆市: "重庆",
            四川省: "四川",
            贵州省: "贵州",
            云南省: "云南",
            西藏自治区: "西藏",
            陕西省: "陕西",
            甘肃省: "甘肃",
            青海省: "青海",
            宁夏回族自治区: "宁夏",
            新疆维吾尔自治区: "新疆",
            台湾省: "台湾",
            香港特别行政区: "香港",
            澳门特别行政区: "澳门",
            // "南海诸岛": '',
        },
    };
    mapChart.setOption(mapOption);
};

onMounted(() => {
    // //初始化chart对象
    // const chart = echarts.init(document.getElementById("example")!);

    // //配置
    // let option = {
    //   //标题
    //   title: {
    //     text: "ECharts 入门示例",
    //   },
    //   tooltip: {},
    //   //标注
    //   legend: {
    //     data: ["销量"],
    //   },
    //   //x轴
    //   xAxis: {
    //     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    //   },
    //   //y轴
    //   yAxis: {},
    //   //系列（数据以及样式类型）
    //   series: [
    //     {
    //       name: "销量",
    //       type: "bar",
    //       data: [5, 20, 36, 10, 10, 20],
    //     },
    //   ],
    // };

    // //绑定配置
    // chart.setOption(option);

    //饼图配置
    var chartDom = document.getElementById("pie")!;
    myChart = echarts.init(chartDom);
    statApi().then((res) => {
        pieData = res.data.salePie;
        mapData = res.data.saleMap;
        const data: any[] = pieData.map((item) => ({
            name: item.name,
            value: item.sale_yesterday,
        }));
        option = {
            tooltip: {
                //鼠标移入的提示信息
                trigger: "item",
                backgroundColor: "rgba(0,0,0,.7)",
                textStyle: {
                    color: "#fff",
                },
                //提示信息的样式  {b}表示数据项名称  {c}数据项数据  {d}百分比
                formatter: "{b}:{c}({d}%)",
            },
            //图例
            legend: {
                orient: "vertical",
                left: "right",
                height: 100,
            },
            series: [
                {
                    type: "pie",
                    //内半径，外半径
                    radius: ["40%", "70%"],
                    label: {
                        //文字颜色
                        color: "inherit",
                    },
                    data,
                },
            ],
        };
        option && myChart.setOption(option);
        drawMap();
    });
});
</script>

<style scoped lang="less">
.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}
</style>
